<template>
	<div class="hello">
		<mt-swipe :auto="2000">
			<mt-swipe-item v-for="items in lists">
				<img :src="items.imgSrc" />
			</mt-swipe-item>
		</mt-swipe>

		<div class="mui-content">
			<ul class="mui-table-view mui-grid-view mui-grid-9">
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<router-link to="/news/newsList">
						<span class="mui-icon mui-icon-home"></span>
						<div class="mui-media-body">淘订阅</div>
					</router-link>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<router-link to="/hot/hotList">
						<span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
						<div class="mui-media-body">我的消息</div>
					</router-link>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<router-link to="/hot/hotList">
						<span class="mui-icon mui-icon-chatbubble"></span>
						<div class="mui-media-body">我的购物车</div>
					</router-link>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<router-link to="/hot/hotList">
						<span class="mui-icon mui-icon-location"></span>
						<div class="mui-media-body">我的收藏</div>
					</router-link>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<router-link to="/hot/hotList">
						<span class="mui-icon mui-icon-eye"></span>
						<div class="mui-media-body">我的推荐</div>
					</router-link>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<router-link to="/hot/hotList">
						<span class="mui-icon mui-icon-phone"></span>
						<div class="mui-media-body">留言反馈</div>
					</router-link>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<router-link to="/hot/hotList">
						<span class="mui-icon mui-icon-map"></span>
						<div class="mui-media-body">我的钱包</div>
					</router-link>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<router-link to="/hot/hotList">
						<span class="mui-icon mui-icon-info"></span>
						<div class="mui-media-body">个人中心</div>
					</router-link>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'hello',
		data() {
			return {
				msg: 'Welcome to Your Vue.js App',
				lists: [{
					imgSrc: "../../static/images/1.jpg"
				}, {
					imgSrc: "../../static/images/2.jpg"
				}, {
					imgSrc: "../../static/images/3.jpg"
				}]
			}
		}
	}
</script>

<style scoped>
	.mint-swipe {
		height: 300px;
	}
	
	.mint-swipe-item {
		height: 300px;
	}
	
	.mint-swipe-item img {
		width: 100%;
		height: 100%;
	}
</style>